<template>
  <div>
    <h1>userList</h1>
    <el-card class="box-card">
      <el-input v-model="query.queryUsername"
                style="width: 500px;"
                @keyup.enter.native="getUserList"
                placeholder="请输入内容">
        <el-button slot="append"
                   icon="el-icon-search"
                   @click="getUserList"></el-button>
      </el-input>
      <el-button type="primary"
                 @click="dialogFormVisible = true"
                 style="margin-left: 25px;">添加用户</el-button>
    </el-card>

    <!-- :visible.sync="dialogFormVisible"：根据这个属性来控制dialog是否开启或关闭 -->
    <el-dialog title="添加用户"
               :visible.sync="dialogFormVisible">
      <el-form :model="userFrom"
               :rules="userFromRules"
               ref="addUserFrom">
        <el-form-item label="用户名"
                      :label-width="formLabelWidth"
                      prop="username">
          <el-input v-model="userFrom.username"></el-input>
        </el-form-item>
        <el-form-item label="密码"
                      :label-width="formLabelWidth"
                      prop="password">
          <el-input v-model="userFrom.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱"
                      :label-width="formLabelWidth"
                      prop="email">
          <el-input v-model="userFrom.email"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="addUser">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 列表 -->
    <template>
      <el-table :data="userList"
                stripe
                style="width: 100%">
        <el-table-column prop="id"
                         label="序号"
                         width="180">
        </el-table-column>
        <el-table-column prop="username"
                         label="姓名"
                         width="180">
        </el-table-column>
        <el-table-column prop="sex"
                         label="性别">
        </el-table-column>
        <el-table-column prop="email"
                         label="邮箱">
        </el-table-column>
        <!-- 必须要携带
        <template slot-scope="scope">

        </template>
        这个标签 否则单击效果不会显示 -->
        <el-table-column label="状态">
          <template slot-scope="scope">
            <!-- 要想在表格中每个switch都单独的控制，写法v-mode=“scope.row.自己定义” -->
            <!-- :active-value=1和:inactive-value=0前必须要加：否则识别不到数字 -->
            <el-switch v-model="scope.row.state"
                       @change="updateUserState(scope.row)"
                       active-color="#13ce66"
                       inactive-color="#ff4949"
                       :active-value=1
                       :inactive-value=0>
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop=""
                         label="操作">
        </el-table-column>
        <el-table-column prop="createTime"
                         label="创建日期"
                         width="180">
        </el-table-column>
      </el-table>
    </template>
    <!-- 分页 -->
    <!-- @size-change="handleSizeChange":切换页码函数 -->
    <!-- @current-change="handleCurrentChange"：切换当前页的pageSize -->
    <!-- :page-sizes="[2, 5, 8, 10]"：当前页显示pageSize的列表 -->
    <!-- :page-size=5：默认每页显示的pageSize -->
    <!-- :total="listTotal"：总记录数 -->
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :page-sizes="[2, 5, 8, 10]"
                   :page-size="query.querySize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="listTotal">
    </el-pagination>
  </div>
</template>

<script>
// 使用axios
import axios from '../axios/index.js'
export default {
  props: {

  },
  components: {

  },
  data () {
    return {
      query: {
        queryCurrent: 1,
        querySize: 5,
        queryUsername: ""
      },
      userList: [],
      listTotal: 0,
      user: [],
      dialogFormVisible: false,
      userFrom: {
        username: '',
        password: '',
        email: ''
      },
      formLabelWidth: '120px',
      userFromRules: {
        username: [
          { required: true, message: '请输入用户名！', trigger: 'blur' },
          { minn: 6, max: 10, message: '长度在5到10个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码！', trigger: 'blur' },
          { minn: 6, max: 10, message: '长度在6到10个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱！', trigger: 'blur' },
          { minn: 6, max: 10, message: '长度在6到10个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    // 调用methods中的方法
    this.getUserList();
  },
  methods: {
    addUser () {
      //this.$refs.loginForm获取DOM 表单校验validate方法有一个参数,参数是一个回调函数
      //回调函数的参数是valid,值为布尔值,true表示表单验证通过,false表示表单验证不通过,这也就是手动的兜底校验
      this.$refs.addUserFrom.validate(valid => {
        if (valid) {
          // get和post传参时不一样：
          // get前端需要使用params进行传参，后动不需要添加requestbody注解
          // post前端不需要params进行传参，后端需要添加requestbody注解

          //表单验证都通过后进行的操作
          axios.post('/addUser', {
            username: this.userFrom.username,
            password: this.userFrom.password,
            email: this.userFrom.email,
          }).then(res => {
            if (res.data.code == 200) {
              this.$message.success(res.data.message)
              this.dialogFormVisible=false
              this.getUserList();
            } else {
              this.$message.error(res.data.message)
            }
          }).catch(e => {
            console.log(e)
          })
        } else {
          this.$message.error("请检查输入内容！")
        }
      })
    },
    // get和post传参时不一样：
    // get前端需要使用params进行传参，后动不需要添加requestbody注解
    // post前端不需要params进行传参，后端需要添加requestbody注解
    getUserList () {
      axios.get('/userList', {
        params: this.query
      }).then(res => {
        if (res.data.code == 200) {
          this.userList = res.data.data
          this.listTotal = res.data.total
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(e => {
        console.log(e)
      })
    },
    updateUserState (step) {
      axios.get('/updateUserState', {
        params: {
          id: step.id,
          state: step.state
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message)
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(e => {
        console.log(e)
      })
    },
    // 切换当前页显示几条数据(val:数据)
    handleSizeChange (val) {
      // 更新query中的pageSize，然后调用函数
      this.query.querySize = val;
      this.getUserList()
    },
    // 切换页码(val:页码)
    handleCurrentChange (val) {
      // 更新query中的页码，然后调用函数
      this.query.queryCurrent = val;
      this.getUserList()
    }
  }
}
</script>

<style>
</style>